import React from 'react'
import slice, { asyncCount } from './redux/slice'
// import { useSelector, useDispatch } from 'react-redux'
import { useAppDispatch, useAppSelector } from '../../hooks'

const { add } = slice.actions

// import store from '../../store'

// 注意: 一下两行代码,只在编译过程中,用于ts检查代码,编译完成之后,这两段代码就没有了
// export type AppDispatch = typeof store.dispatch
// export type RootState = ReturnType<typeof store.getState>

// console.log(typeof store.dispatch) //'function'

export default function Count() {
  // state默认推论的类型是unknow,所以访问state的时候ts检查会报错,所以我们需要手动声明一下state的类型
  // const count = useSelector((state:RootState) => {
  //   return state.c.count
  // })

  const count = useAppSelector((state) => {
    return state.c.count
  })
  // const dispatch = useDispatch<AppDispatch>()
  const dispatch = useAppDispatch()
  return (
    <div>
      <h1>Count计数</h1>
      <h2 style={{ marginLeft: 10 }}>{count}</h2>
      <button
        onClick={() => {
          dispatch(add(2))
        }}
      >
        +
      </button>
      <button
        onClick={() => {
          // dispatch函数的类型默认要求传入的数据的类型是AnyAction(必须是一个普通的action对象)
          dispatch(asyncCount())
        }}
      >
        + async
      </button>
    </div>
  )
}
